<template>
  <div class="modify-dialog">
    <slot></slot>
    <el-dialog :close-on-click-modal="false" v-bind="dialogOpts" :visible.sync="dialogVisible" center>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item
            v-for="(list, index) in [{ label: '安装人员', model: 'az', list: azList }, { label: '拣货人员', model: 'jh', list: jhList }, { label: '装车人员', model: 'zc', list: zcList }, { label: '卸货人员', model: 'xh', list: xhList }]"
            :key="index" :label="list.label">
          <el-select v-model="form[list.model]" multiple filterable>
            <el-option
                v-for="(item, i) in list.list"
                :label="item.userName"
                :value="item.userName"
                :key="i">
            </el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="装车车型">-->
        <!--          <el-select v-model="carType">-->
        <!--            <el-option value="5" label="400元/车"></el-option>-->
        <!--            <el-option value="4" label="300元/车"></el-option>-->
        <!--            <el-option value="3" label="200元/车"></el-option>-->
        <!--            <el-option value="2" label="120元/车"></el-option>-->
        <!--            <el-option value="1" label="60元/车"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <template slot="footer">
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onConfirm" v-prevent-re-click> 确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";

export default {
  mixins: [modifyMixins],
  data() {
    return {
      dialogTitle: "操作人员",
      dialogVisible:false,
      labelPosition: "left",
      // carType:"",
      form: {
        az:[],
        jh:[],
        zc:[],
        xh:[],
      },
      azList: [],
      jhList: [],
      zcList: [],
      xhList: [],
    };
  },
  computed: {},
  mounted() {
    const loginTypes = [4, 4, 4, 4];
    const lists = ['azList', 'jhList', 'zcList', 'xhList'];
    Promise.all(loginTypes.map((loginType, index) =>
        this.$api.orderSelectInstallationUser({loginType})
            .then(res => {
              res.map(el => el.loginType = loginType)
              this[lists[index]] = res;
            })
    )).catch(error => {
      console.error('Error', error);
    });
  },
  methods: {
    showDialog(modify = "add", row = {}) {
      this.dialogVisible = true;
      this.row=row
      this.form = this.$options.data.call(this).form
    },
    onConfirm() {
      //if(this.form.jh.length==0||this.form.az.length==0||this.form.zc.length==0||this.form.xh.length==0) return this.$message.error("请全部填写！")
      let data = {
        "az": this.form.az.map(el => ({installers: el, type: 1, orderId: this.row.id,areaId: this.row.area})),
        "jh": this.form.jh.map(el => ({installers: el, type: 2, orderId: this.row.id,areaId: this.row.area})),
        "zc": this.form.zc.map(el => ({installers: el, type: 3, orderId: this.row.id,areaId: this.row.area})),
        "xh": this.form.xh.map(el => ({installers: el, type: 4, orderId: this.row.id,areaId: this.row.area})),
      };
      let mergedArray = [...data.az, ...data.zc, ...data.jh, ...data.xh,];
      for (let key in data) {
        if (Array.isArray(data[key]) && data[key].length === 0) {
          delete data[key];
        }
      }
      this.$api.orderAddInstaller(mergedArray).then(res=>{
            if(res){
              this.$message.success("添加成功！"),
                  this.dialogVisible=false
            }
          }
      )
    }
  },
};
</script>

<style lang="less" scoped>
.modify-dialog {
  :deep(.el-form-item__content) {
    width: 220px !important;
  }
}
</style>
